<template>
  <div>
    <slot name="json">
      <b-ace-editor
        v-model="editValue"
        :lang="props.lang"
        :wrap="props.wrap"
        :theme="props.theme"
        :readonly="props.readonly"
        :font-size="props.fontSize"
        :snippets="props.snippets"
        :height="props.height"
        :width="props.width"
        :options="props.options"
        @init="init"
        @change="change">
      </b-ace-editor>
      <!-- <div style="padding: 8px 0">
        <el-button type="primary" @click="handleCells">压缩</el-button>
        <el-button type="primary" @click="handleFormat">格式化</el-button>
      </div> -->
    </slot>
  </div>
</template>

<script setup>
  import { reactive, ref, toRef, onBeforeMount, computed } from 'vue';
  import yuAceEditor from '@/pub/yu-ace-editor.js';
  import { Modal} from '@opentiny/vue'
  import 'brace/ext/emmet';
  import 'brace/ext/language_tools';
  import 'brace/mode/json';
  import 'brace/snippets/json';
  import 'brace/theme/chrome';
  import 'brace/theme/xcode';
  import 'brace/theme/clouds';
  import 'brace/theme/crimson_editor';
  import 'brace/theme/sqlserver';
  import 'brace/theme/github';
  import 'brace/theme/textmate';
  import 'brace/theme/tomorrow';
  import 'brace/theme/solarized_light';
  import 'brace/theme/cobalt';
  import 'brace/theme/dracula';
  import 'brace/theme/monokai';
  import 'brace/theme/solarized_dark';
  import 'brace/theme/terminal';
  import 'brace/theme/vibrant_ink';

  const props = defineProps({
    //语言模式
    lang: { type: String, default: yuAceEditor.lang },
    //有效值
    data: { type: String, default: '' },
    //只读
    readonly: { type: Boolean, default: yuAceEditor.readonly },
    //宽度
    width: { type: String, default: yuAceEditor.width },
    //高度
    height: { type: String, default: yuAceEditor.height },
    //皮肤
    theme: { type: String, default: yuAceEditor.theme },
    //缩进
    wrap: { type: Boolean, default: yuAceEditor.wrap },
    //代码提示
    snippets: { type: Boolean, default: yuAceEditor.snipp },
    options:{}
  });
  // const editValue = toRef(props, 'editValue');
  const lang = toRef(props, 'lang');
  const emits = defineEmits(['update:value', 'change', 'handleCells', 'handleFormat', 'init']);

  const editValue = computed({
    get: () => props.data,
    set: editValue => {
      emits('update:value', editValue);
    },
  });
  //数据处理
  onBeforeMount(() => {
    if (lang.value === 'json') {
      //校验数据格式
      if (!isCheck()) 
    {
      Modal.message({ message: '数据格式错误', status: 'error' })
        // ElMessage({
        //   message: '数据格式错误',
        //   type: 'error',
        // });
      }
    }
  });
  //校验数据是否是json格式
  const isCheck = () => {
    if (typeof editValue.value == 'string') {
      try {
        var obj = JSON.parse(editValue.value);
        if (typeof obj == 'object' && obj) {
          return true;
        } else {
          return false;
        }
      } catch (e) {
        return false;
      }
    } else if (typeof editValue.value == 'object' && editValue.value) {
      return true;
    }
  };
  //初始化之后
  const init = () => {
    emits('init');
  };
  // 压缩
  const handleCells = () => {
    emits('handleCells');
  };
  //格式化
  const handleFormat = () => {
    emits('handleFormat');
  };
</script>
<style lang="scss" scoped></style>
